<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <!-- 804相关作业 师改 -->
    <div id="app">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>商品类型</th>
                <th>商品名</th>
                <th>单价</th>
                <th>折扣价</th>
                <th>美元价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
            <tr v-for="(item,index) in good" :key="item.id" v-if="item.category==1">
                <td>{{item.id}}</td>
                <td>{{item.category==1?'电子产品':'生活用品'}}</td>
                <td>{{item.name}}</td>
                <td><s v-rmb="item.price">{{item.price}}</s></td>
                <td>{{item.price | discount8 | fmtRMB}}</td>
                <td>{{item.price | discount8 | getUSD | fmtUSD}}</td>
                <td>
                    <button @click="sub(index)">-</button> {{item.quantity}}
                    <button @click="add(index)">+</button>
                </td>
                <!-- <td v-rmb="item.total">{{totalPrice(good,index)}}</td> -->
                <td v-rmb="item.total">{{totalPrice(index)}}</td>
            </tr>
            <tr v-for="(item,index) in good" :key="item.id" v-if="item.category==2">
                <td>{{item.id}}</td>
                <td>{{item.category==1?'电子产品':'生活用品'}}</td>
                <td>{{item.name}}</td>
                <td><s v-rmb="item.price">{{item.price}}</s></td>
                <td>{{item.price | discount5| fmtRMB }}</td>
                <td>{{item.price | discount5 | getUSD| fmtUSD}}</td>
                <td>
                    <button @click="sub(index)">-</button> {{item.quantity}}
                    <button @click="add(index)">+</button>
                </td>
                <!-- <td v-rmb="item.total">{{totalPrice(good,index)}}</td> -->
                <td v-rmb="item.total">{{totalPrice(index)}}</td>
            </tr>
            <tr>
                <td colspan="8" align="center">
                    总价：<em>{{allPrice}}元</em>
                </td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                good: [{
                    id: '1001',
                    name: '三星手机',
                    price: 3800.0,
                    category: 1,
                    quantity: 1,
                    total: 0 //增加一个关于商品总价的

                }, {
                    id: '1002',
                    name: '海飞丝洗发水',
                    price: 56.0,
                    category: 2,
                    quantity: 1,
                    total: 0
                }, {
                    id: '1003',
                    name: '飞科刮胡刀',
                    price: 900.0,
                    category: 1,
                    quantity: 1,
                    total: 0
                }, ],

            },
            methods: {
                sub(index) {
                    // this.good[index].quantity > 1 ? this.good[index].quantity-- : 1
                    this.good[index].quantity--
                },
                add(index) {
                    this.good[index].quantity++
                }

            },
            watch: {
                //定义一个监听 下面定义的 计算属性
                GoodListData: {
                    handler(newVal, oldVal) {
                        for (let i in newVal) {
                            if (newVal[i].quantity != oldVal[i].quantity) {
                                //查看新的数组中 数量和 旧数组中数量 是否一致，如果不一致，说明修改的是该index的商品
                                console.log('修改的商品是:', this.good[i].name)
                                this.good[i].quantity =
                                    newVal[i].quantity <= 0 ?
                                    oldVal[i].quantity :
                                    newVal[i].quantity
                            }
                        }
                    },
                    deep: true, //数组和对象需要使用 深度监听
                },
            },
            computed: {
                //定义一个计算属性 计算数组
                GoodListData() {
                    //数组的深度拷贝。 浅拷贝。
                    //将JSON对象 转换为 字符数据 序列化 JSON.stringify()
                    //将字符数据 转换为 JSON对象 反序列化 JSON.parse(字符)
                    return JSON.parse(JSON.stringify(this.good))
                },
                //计算总价
                allPrice: function() {
                    var allPrice = 0;
                    for (var i = 0; i < this.good.length; i++) {
                        allPrice += this.good[i].price * this.good[i].quantity;
                    }
                    return allPrice;
                },
                totalPrice() { //定义计算属性--求商品小计
                    //参数:商品数组，下标index
                    // return function(good, index) { 
                    return function(index) {
                        let good = this._self.good
                        if (good[index].category == 1) {
                            good[index].total = good[index].price * good[index].quantity * 0.8
                            return good[index].total

                        }
                        if (good[index].category == 2) {
                            good[index].total = good[index].price * good[index].quantity * 0.5
                            return good[index].total
                        }
                    }

                }

            },
            filters: {
                discount8: function(value) {
                    return parseFloat(value * 0.8);
                },
                discount5: function(value) {
                    return parseFloat(value * 0.5);
                },
                getUSD: function(value) {
                    return value * 0.1482

                },
                fmtRMB: function(value) {
                    return value.toLocaleString('zh-Hans-CN', {
                        style: 'currency',
                        currency: 'CNY',
                    })
                },
                fmtUSD: function(value) {
                    return value.toLocaleString('en-US', {
                        style: 'currency',
                        currency: 'USD',
                    })
                }
            },
            directives: {
                //自定义指令 声明v-rmb
                rmb: {
                    inserted: function(el) {
                        //el就是显示总价td标记，el.outerText 就获得一对标记中的内容 <td > XXXX < /td>
                        let s = parseFloat(el.outerText).toLocaleString('zh-Hans-CN', {
                            style: 'currency',
                            currency: 'CNY',
                        })
                        el.innerText = s //将带有￥的千分法数字赋值给td 结果 <td v-rmb>￥3,070.00</td>
                    },
                    update: function(el, bind) {
                        //bind.value
                        let s = parseFloat(bind.value).toLocaleString('zh-Hans-CN', {
                            style: 'currency',
                            currency: 'CNY',
                        })
                        el.innerText = s
                    },
                },
                usd: {
                    inserted: function(el) {
                        //el就是显示总价td标记，el.outerText 就获得一对标记中的内容 <td > XXXX < /td>
                        let s = parseFloat(el.outerText).toLocaleString('en-US', {
                            style: 'currency',
                            currency: 'USD',
                        })
                        el.innerText = s //将带有￥的千分法数字赋值给td 结果 <td v-rmb>￥3,070.00</td>
                    },
                    update: function(el, bind) {
                        //bind.value
                        let s = parseFloat(bind.value).toLocaleString('en-US', {
                            style: 'currency',
                            currency: 'USD',
                        })
                        el.innerText = s
                    },
                },
                //监听器

            },



        })
    </script>
</body>

</html>